<template>
 <div>
    <el-button type="text" @click="dialogTableVisible = true" style="width:50px;height: 35px; background-color: azure;" icon="el-icon-shopping-cart-2"></el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" width="800px">
        <el-table :data="gridData">
            <el-table-column property="name" label="型号" width="140"></el-table-column>
            <el-table-column property="price" label="价格" width="100"></el-table-column>
            <el-table-column property="username" label="用户" width="100"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除订单</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
 </div>
</template>

<script>
import axios from 'axios';
export default{
 name: 'shopbus',
 components: {},
 data(){
    return {
        showList:['mi','mipad','mipods'],
        gridData: [],
        gridDatalength:'',
        addorderList:'',
        usernameList:[
            {username:'黄蛋蛋',address:'比奇堡海绵路86号菠萝屋'},
            {username:'董早早',address:'比奇堡水母路23号珊瑚屋'},
            {username:'徐浩浩',address:'比奇堡水母路66号破船屋'},
            {username:'田嗷嗷',address:'比奇堡珊瑚路74号水母屋'},
            {username:'丁闻闻',address:'比奇堡松鼠路74号巨树屋'},
            {username:'劣忠忠',address:'比奇堡松鼠路22号海之霸'},
            {username:'徐晓晓',address:'比奇堡海绵路21号石像屋'},
            {username:'冯丰风',address:'比奇堡中心商务区2号路14号蟹黄堡'},
        ],
        addgridData:
            {
            name: '',
            price: '',
            username:'',
            address: '',
            id:'',
        },
        dialogTableVisible: false,
    }
 },
 methods:{
    clearInterval(){
        if(this.gridDatalength >= 7){
                        clearInterval(this.addorderList)
                    }
    },
    getgridData(){
        axios.get('http://localhost:3001/shopbus').then((res) =>{
            this.gridData = res.data
            this.gridDatalength = res.data.length
            this.clearInterval()
        })
    },
    handleDelete(index, row) {
        axios.delete('http://localhost:3001/shopbus/'+row.id).then(()=>{
                    this.getgridData()
                    clearInterval(this.addorderList)	
                    this.timer()
        });
    },
    timer(){
        this.addorderList =  setInterval(() => {
            let listIndex = Math.floor(Math.random()*3)
            axios.get('http://localhost:3001/'+this.showList[listIndex]).then((res) =>{
                let commodityindex = Math.floor(Math.random()*res.data.length)
                let usernameIndex = Math.floor(Math.random()*this.usernameList.length)
                if(res.data.length == 0){
                    return ''
                }else{
                    this.addgridData.name = res.data[commodityindex].name
                    this.addgridData.price = res.data[commodityindex].price
                    this.addgridData.username = this.usernameList[usernameIndex].username
                    this.addgridData.address = this.usernameList[usernameIndex].address
                    if(this.gridDatalength == 0){
                        this.addgridData.id = 0
                    }else{
                        this.addgridData.id = this.gridData[this.gridDatalength-1].id+1
                    }
                    axios.post('http://localhost:3001/shopbus/', this.addgridData).then(()=>{
                            this.getgridData();
                            this.clearInterval()
                    }) 
                }
            })   
        }, 3000);
        this.clearInterval()
        
    }
},
 mounted(){
    this.timer()
    this.getgridData();
    this.clearInterval()  
 }
};
</script>

<style scoped lang='less'></style>